<template>
  <div class="ly-page">
    <ul class="ly-list-input">
      <li>
        <label class="ly-label">标题：</label>
        <el-input class="ly-input ly-link" v-model="business.title" size="small" placeholder="请输入标题"></el-input>
      </li>
      <li>
        <label class="ly-label">主讲：</label>
        <el-input class="ly-input ly-link" v-model="business.lecturer" size="small" placeholder="请输入主讲"></el-input>
      </li>
      <li>
        <label class="ly-label">简介：</label>
        <el-input class="ly-input ly-link" v-model="business.remark" size="small" placeholder="请输入简介"></el-input>
      </li>
      <li>
        <label class="ly-label">图片：</label>
        <el-upload class="avatar-uploader" :action="action"
                   :show-file-list="false"
                   :on-success="handleAvatarSuccess"
                   :before-upload="beforeAvatarUpload">
          <img v-if="business.picture" :src="business.picture" class="avatar">
          <img v-else :src="img" class="avatar">
        </el-upload>
      </li>
      <li>
        <label class="ly-label">服务内容：</label>
      </li>
      <div class="editor-container">
        <kindeditor ref="kindeditor" :content="business.content"></kindeditor>
      </div>
    </ul>
    <div class="ly-btn-footer">
      <el-button @click="$router.back(-1)">返回</el-button>
      <el-button @click="$router.back(-1)">取消</el-button>
      <el-button type="primary" @click="submit">保存</el-button>
    </div>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import config from '@/config'
  import {update, insert} from '@/api/business'

  export default {
    name: "add",
    computed: {
      ...mapGetters(['editInfo'])
    },
    data() {
      return {
        img: require('../../assets/images/icon_img.png'),
        action: config.baseURL + '/upload/upload',
        business: {
          content: '',
          lecturer: '',
          picture: '',
          title: '',
        }
      }
    },
    methods: {
      handleAvatarSuccess(res, file) {
        this.business.picture = res.data
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
        const isLt2M = file.size / 1024 / 1024 < 2

        if (!isJPG) {
          this.$message.error('图片格式错误!')
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!')
        }
        return isJPG && isLt2M;
      },
      submit() {
        let data = this.editInfo
        this.editInfo.content = this.$refs.kindeditor.outContent
        this.editInfo.lecturer = this.business.lecturer
        this.editInfo.picture = this.business.picture
        this.editInfo.title = this.business.title
        this.editInfo.remark = this.business.remark
        let updateData
        if (this.$route.query.type) {
          updateData = update
        } else {
          updateData = insert
          delete this.editInfo.id
        }
        updateData(data).then(response => {
          let result = response.data
          if (result.code === '0000') {
            this.$message.success(result.msg)
            if (this.$route.query.type) {
              this.business = {}
            }
          } else {
            this.$message.error(result.msg)
          }
        })
      },
    },
    created() {
      let vm = this
      setTimeout(() => {
        if (vm.$route.query.type) {
          vm.business = vm.editInfo
        }
      }, 500)
    },
    beforeDestroy() {
      this.business = {}
    }
  }
</script>

<style scoped>

</style>